﻿@model TestOnlineProject.Models.Entities.TestModel
@using TestOnlineProject.Common
@{
    ViewBag.Title = "Test";
    Layout = "~/Views/Shared/_NoLayout.cshtml";
}
<script>
    // Moving timer.
    function moveScroller() {
        var move = function() {
            var st = $(window).scrollTop();
            var ot = $("#scroller-anchor").offset().top;
            var s = $("#timer");
            if(st > ot) {
                s.css({
                    position: "fixed",
                    top: "0px"
                });
            } else {
                if(st <= ot) {
                    s.css({
                        position: "absolute",
                        top: ""
                    });
                }
            }
        };
        $(window).scroll(move);
        move();
    }
    $(function() {
        moveScroller();
    });

    
    $(document).ready(function () {
        // Start Timer.
        startTime();

        // Initial page.
        goToPage(@ViewBag.CurrentPage, @ViewBag.totalPage);
    });

    // Single choice checking.
    function check(c, i) {
        $("." + c).attr('checked', false);
        $("#" + i).attr('checked', true);
    }
    
    // Paging.
    function goToPage(page, totalPage)
    {
    $(".question").hide();
    $(".p" + page).show();
    window.location="#test_content";
    }

    // Countdown.
    var seconds = @ViewBag.Time;
    function startTime() {
        var date = new Date(1970, 1, 1);
        date.setSeconds(seconds);
        if (seconds > 0) {
        // Change color.
            if(seconds <= 60)
            {
                if(document.getElementById("timer").style.color == "Black")
                {
                document.getElementById("timer").style.color = "Red";
                }
                else{
                document.getElementById("timer").style.color = "Black";
                }
            }
            seconds = seconds - 1;
        }
        else {
        // Submit.
        document.getElementById("autoSubmit").click();
        }
        // Set Timer.
        document.getElementById('timer').innerHTML = date.toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");
        t = setTimeout(function () { startTime() }, 1000);
    }
</script>
<div style="min-width: 1000px" id="test_content">
    <div id="scroller-anchor">
    </div>
    <div id="timer" style="color: Black; width: 150px; line-height: 27px; position: absolute;
        right: 0px; margin-right: 20px; border: 1px solid gray; padding: 5px; text-align: center;
        vertical-align: middle; font-weight: bold; box-shadow: -5px 5px 5px #888; -webkit-border-radius: 5px;
        -moz-border-radius: 5px; border-radius: 5px; background: url('../Images/hourglass.jpg');
        background-size: 35px; background-repeat: no-repeat; background-color: White;">
    </div>
    <table id="top" class="table table-bordered" style="background: #F7F7F9">
        <tr>
            <td style="font-weight: bold">
                <div>
                    <span>Test Title: @Html.DisplayFor(model => model.Title)</span></div>
                <div>
                    <span>Subject: @ViewBag.SubjectName</span></div>
                <div>
                    <span>Start Time: @Html.DisplayFor(model => model.StartTime)</span></div>
                <div>
                    <span>Number of Questions: @Html.DisplayFor(model => model.NumberOfQuestions)</span></div>
            </td>
        </tr>
    </table>
    <div>
        @using (Html.BeginForm())
        {
            var totalPage = 0;
        
            <input type="hidden" id="currentPage" name="currentPage" value="@ViewBag.CurrentPage"/>
            @Html.HiddenFor(model => model.userTestId)
            @Html.HiddenFor(model => model.StartTime)
            @Html.HiddenFor(model => model.Duration)
            @Html.HiddenFor(model => model.NumberOfQuestions)
            @Html.HiddenFor(model => model.Title)
            @Html.HiddenFor(model => model.Subject)

            for (int i = 0; i < Model.Questions.Count; i++)
            {
                if (i % 10 == 0)
                {
                    totalPage++;
                }
                var pageClass = "p" + totalPage;
            
            <table class="table @pageClass question" style="table-layout: fixed">
                <tr style="background-color: #D9EDF7; font-weight: bold">
                    <td>
                        <span>Question </span>@(i + 1)
                        <br />
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.HiddenFor(model => Model.Questions[i].Content)
                        <span style="word-wrap: break-word">@Html.Raw(Model.Questions[i].Content)</span>
                    </td>
                </tr>
                @{
                        
                // If QuestionType is single choice or true/false.
                if (Model.Questions[i].QuestionTypeId == 1 || Model.Questions[i].QuestionTypeId == 4)
                {
                
                    @Html.HiddenFor(model => Model.Questions[i].QuestionTypeId)
                    @Html.HiddenFor(model => Model.Questions[i].QuestionId)
                    for (int j = 0; j < Model.Questions[i].Answers.Count; j++)
                    {<tr>
                        <td>
                            @Html.HiddenFor(model => Model.Questions[i].Answers[j].AnswerId)
                            @Html.HiddenFor(model => Model.Questions[i].Answers[j].Content)
                            @{
                        var id = Model.Questions[i].Answers[j].AnswerId; var call = "check(" + i + "," +
                        id + ")";
                            }
                            @Html.CheckBoxFor(model => Model.Questions[i].Answers[j].Checked, new { type = "radio", @class = @i, id = @id, onclick = @call })
                            @{
                        var answerNo = j + 1;
                            }
                            <span>@answerNo) </span>
                            <div style="display: inline-block">
                                <span style="word-wrap: break-word">@Html.Raw(Model.Questions[i].Answers[j].Content)</span>
                            </div>
                        </td>
                    </tr>
                    }

                }

                // If QuestionType is multiple choice.
                if (Model.Questions[i].QuestionTypeId == 2)
                {
                    @Html.HiddenFor(model => Model.Questions[i].QuestionTypeId)
                    @Html.HiddenFor(model => Model.Questions[i].QuestionId)               
                    for (int j = 0; j < Model.Questions[i].Answers.Count; j++)
                    {
                    <tr>
                        <td>
                            @Html.HiddenFor(model => Model.Questions[i].Answers[j].AnswerId)
                            @Html.HiddenFor(model => Model.Questions[i].Answers[j].Content)
                            @Html.CheckBoxFor(model => Model.Questions[i].Answers[j].Checked)
                            @{
                        var answerNo = j + 1; 
                            }
                            <span>@answerNo) </span>
                            <div style="display: inline-block">
                                <span style="word-wrap: break-word">@Html.Raw(Model.Questions[i].Answers[j].Content)</span>
                            </div>
                        </td>
                    </tr>
                    }

                }

                // If QuestionType is matching.
                if (Model.Questions[i].QuestionTypeId == 3)
                {
                
                    @Html.HiddenFor(model => Model.Questions[i].QuestionTypeId)
                    @Html.HiddenFor(model => Model.Questions[i].QuestionId)
                    for (int j = 0; j < Model.Questions[i].Answers.Count; j++)
                    {
                    <tr>
                        <td>
                            @Html.HiddenFor(model => Model.Questions[i].Answers[j].AnswerId)
                            @Html.HiddenFor(model => Model.Questions[i].Answers[j].Content)
                            @{
                        var answerNo = j + 1;
                            }
                            <span>@answerNo) </span>
                            <div style="display: inline-block">
                                <span style="word-wrap: break-word">@Html.Raw(Model.Questions[i].Answers[j].Content)</span>
                            </div>
                            <div style="margin-top: 10px">
                                <img src="@Url.Content("~/Images/2.gif")" style="margin-left:20px; margin-bottom:10px"/>
                                <span style="word-wrap: break-word">@Html.DropDownListFor(model => model.Questions[i].Answers[j].MatchId, ViewData[Model.Questions[i].QuestionId.ToString() + "-" + Model.Questions[i].Answers[j].AnswerId.ToString()] as SelectList, "--- Select ---", new { style = "padding:0px" })</span>
                            </div>
                        </td>
                    </tr>
                    }

                    // Save matchs state.
                    for (int j = 0; j < Model.Questions[i].Matchs.Count; j++)
                    {
                    @Html.HiddenFor(model => Model.Questions[i].Matchs[j].MatchId)
                    @Html.HiddenFor(model => Model.Questions[i].Matchs[j].Content)
                    }
                }

                }
            </table>  
            }
    
            <div>
                <table width="100%">
                    <tr>
                        <td>
                            <div>
                                <span>Page: </span><span id="page">@ViewBag.CurrentPage</span><span>/@ViewBag.totalPage</span>
                            </div>
                            <div id="page-selection">
                            </div>
                            <script>
                            $('#page-selection').bootpag({
                                total: @totalPage,
                                page: @ViewBag.CurrentPage
                            }).on("page", function (event, num) {
                                goToPage(num, @totalPage);
                                $("#page").html(num);
                                $("#currentPage").val(num);
                            });
                            </script>
                        </td>
                        <td style="width: 450px">
                            <div style="text-align: right">
                                <button name="submit" class="btn" type="submit" value="Save Without Submit" style="width: 160px">
                                    Save without submit</button>
                                <button name="submit" class="btn" type="submit" value="Submit And Finish" style="width: 160px"
                                    onclick="return confirm('Are you sure you want to submit and finish the test?')">
                                    Submit and finish</button>
                                <button id="autoSubmit" name="submit" type="submit" value="Submit And Finish" style="display: none">
                                    Submit And Finish</button>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>

        }
    </div>
</div>
